prosemirror-model

What is prosemirror-model?

The prosemirror-model package is a part of the ProseMirror toolkit, which provides a powerful, flexible, and customizable framework for building rich text editors. The prosemirror-model package specifically deals with the document model, which includes defining schemas, creating and manipulating documents, and working with nodes and marks.

What are prosemirror-model's main functionalities?

Defining a Schema

This feature allows you to define a schema for your document. A schema specifies the types of nodes and marks that can appear in the document, as well as their attributes and how they should be serialized to and from DOM.

const { Schema } = require('prosemirror-model');

const mySchema = new Schema({
  nodes: {
    doc: { content: 'block+' },
    paragraph: { content: 'text*', toDOM: () => ['p', 0] },
    text: { inline: true }
  },
  marks: {
    strong: { toDOM: () => ['strong', 0] }
  }
});

Creating a Document

This feature allows you to create a document using the schema you defined. The document is created from a JSON representation that matches the schema.

const { Node } = require('prosemirror-model');

const doc = Node.fromJSON(mySchema, {
  type: 'doc',
  content: [
    { type: 'paragraph', content: [{ type: 'text', text: 'Hello, world!' }] }
  ]
});

Manipulating Nodes

This feature allows you to manipulate nodes within the document. You can create new nodes, copy existing nodes, and create fragments of nodes.

const { Fragment } = require('prosemirror-model');

const paragraph = mySchema.nodes.paragraph.createAndFill();
const textNode = mySchema.text('New text');
const newParagraph = paragraph.copy(Fragment.from(textNode));

Other packages similar to prosemirror-model

slate

Slate is another framework for building rich text editors. It provides a more flexible and less opinionated approach compared to ProseMirror. While ProseMirror uses a schema-based approach to define the document structure, Slate allows for more dynamic and custom data models.

draft-js

Draft.js is a framework for building rich text editors developed by Facebook. It uses a content state model to represent the document and provides a set of immutable data structures for manipulating the content. Draft.js is more opinionated and less flexible compared to ProseMirror, but it integrates well with React.

quill

Quill is a rich text editor that provides a simple and easy-to-use API. It is less flexible compared to ProseMirror and Slate, but it is very easy to set up and use. Quill is suitable for applications that need a basic rich text editor without much customization.

README

prosemirror-model

[ WEBSITE | ISSUES | FORUM | CHANGELOG ]

This is a core module of ProseMirror. ProseMirror is a well-behaved rich semantic content editor based on contentEditable, with support for collaborative editing and custom document schemas.

This module implements ProseMirror's document model, along with the mechanisms needed to support schemas.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license. There's a forum for general discussion and support requests, and the Github bug tracker is the place to report issues.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Changelog

1.24.1 (2024-12-10)

Bug fixes

The parser now automatically preserves whitespace inside <pre> or white-space: pre elements.